import { PureComponent } from 'react';
import { connect } from 'react-redux';
import List from './components/List';
import Topic from './components/Topic';
import Recommend from './components/Recommend';
import Writer from './components/Writer';
import { actionCreator } from './store';
import './index.scss';

class Home extends PureComponent {
    render() {
        const { showScroll } = this.props;
        return (
            <div className="HomeWrapper">
                <div className="home-left">
                    <Topic />
                    <List />
                </div>
                <div className="home-right">
                    <Recommend />
                    <Writer />
                </div>
                {showScroll && (
                    <div className="side-tool" onClick={() => window.scrollTo(0, 0)}>
                        <i className="iconfont icon-link"></i>
                    </div>
                )}
            </div>
        );
    }
    componentDidMount() {
        this.props.getHomeInfo();
        window.addEventListener('scroll', this.props.changeScroll);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.props.changeScroll);
    }
}

const mapStateToProps = state => ({
    showScroll: state.getIn(['home', 'showScroll']),
});

const mapDispatchToProps = disptch => ({
    getHomeInfo() {
        disptch(actionCreator.getHomeInfoAction());
    },
    changeScroll() {
        disptch(actionCreator.changeScrollAction());
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);
